<template>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>面积</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody>
                <tr v-for="a in dataa" >
                    <td>{{a.houseTypeName}}</td>
                    <td><img :src="'https://localhost:7189/'+a.houseTypeImg" width="60px" height="60px"></td>
                    <td>{{a.houseTypeArear}}</td>
                    <td>{{a.houseTypeState}}</td>
                    <td>

                    </td>
                </tr>
            </tbody>
        </table>
        一共{{page.count}}条 一共{{ page.count }}页  每页{{ps.pageSize}}条 当前第{{ps.pageIndex}}页
        <input type="button" value="首页" @click="Fan(1)"/>
        <input type="button" value="上一页" @click="Fan(ps.pageIndex-1)"/>
        <input type="button" value="下一页" @click="Fan(ps.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Fan(page.pagecount)"/>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted,ref } from 'vue';
import { useRouter } from 'vue-router';
import moment from 'moment';
const router = useRouter();

const Fan=(val:any)=>{
    if(val>0 && val<=page.value.pagecount)
    {
        ps.value.pageIndex = val;
        Show();
    }
    
}


onMounted(()=>{
    Show();
})


const dataa = ref([{
     "houseTypeId": 0,
      "houseTypeName": "",
      "houseTypeImg": "",
      "houseTypeArear": 0,
      "houseTypeState": 0
}])

const ps = ref({
    pageIndex:1,
    pageSize:2,
    name:"",
    min:0,
    max:0
})

const page = ref({
    count:0,
    pagecount:0
})

const Show = ()=>{
    axios.get("https://localhost:7189/api/HouseType/Show",{params:ps.value}).then(res=>{
        dataa.value =res.data.tangPage;
        page.value.count = res.data.count;
        page.value.pagecount = Math.ceil(page.value.count/ps.value.pageSize);
    });
}
</script>

<style scoped>

</style>